import React from 'react'
import AutoFocusTextInput from './AutoFocusTextInput'
import ParentNode from './ParentNode'
class RefDemo extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      show: true
    }
    
    this.myRef = React.createRef()
  }
  focusText() {
    this.input.focus()
  }
  render() {
    return <div>
      {
        this.state.show&&<div ref={this.myRef} style={{ width: 100, height: 100, backgroundColor: 'red' }}></div>
      }
      <button onClick={() => { this.setState({ show: !this.state.show }) }}>click</button>
      <button onClick={() => {
        console.log(this.myRef)
      }}>打印ref</button>

      <div>
        <input type="text" ref={this.inputRef} />
        <button onClick={() => {
          this.inputRef.current.focus()
        }}>focus</button>
      </div>

      <AutoFocusTextInput defaultValue='zhangsan' label='姓名：' />

      <ParentNode/>
    </div>
  }
}
export default RefDemo